<!DOCTYPE html>
<html lang="zh-CN">
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/carousel.css">
    <style>

        /*鼠标停留 出现阴影效果*/
        .t-hover-shadow {
            transition: transform .3s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s;
        }

        .t-hover-shadow:hover {
            box-shadow: 0 10px 50px rgba(51, 51, 51, .25);
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            transform: translateY(-10px)
        }
        /*	鼠标停留 出现阴影效果**/

        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .hidden{
            display: none;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding : 5px;
            border: 1px #f60 solid;
        }
        #typeList  :not(:first-child) {
            margin-top:20px;
        }
        .label-text {
            margin:0 10px;
        }
        .panel {
            border-radius:0;
        }
        h3.break {
            font-size:16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        h3.break>a {
            text-decoration:none;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" style="font-size:32px;">互联网众筹系统</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 张三<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="member.html"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" href="index.html"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                            </li>
                            <li class="active">
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="start.html"><i class="glyphicon glyphicon-edit"></i> 发起众筹</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="minecrowdfunding.html"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul id="typeList" style="list-style: none;">
                            <li>
                                分类：
                                <span class="label-type active"><a href="http://localhost:8888/project/show/more/all">全部</a></span>
                                <span class="label-text" id="single" onclick="singleActive()" ><a href="http://localhost:8888/project/show/more/other?typeId=1">单机</a></span>
                                <span class="label-text" id="multiplayer"><a href="http://localhost:8888/project/show/more/other?typeId=2">多人</a></span>
                                <span class="label-text" id="around"><a href="http://localhost:8888/project/show/more/other?typeId=3">周边</a></span>
                                <span class="label-text" id="other"><a href="http://localhost:8888/project/show/more/other?typeId=4">其他</a></span>
                            </li>
                            <!--                            <li>-->
                            <!--                                状态：<span class="label-status actvie">全部</span> <span class="label-text">即将开始</span> <span class="label-text">众筹中</span> <span class="label-text">众筹成功</span>-->
                            <!--                            </li>-->
                            <!--                            <li>-->
                            <!--                                排序：<span class="label-order actvie">综合排序</span> <span class="label-text">最新上线</span> <span class="label-text">金额最多</span> <span class="label-text">支持最多</span>-->
                            <!--                            </li>-->
                        </ul>
                    </div>
                    <div class="panel-footer" style="height:50px;padding:0;">
                        <!--                        <div style="float:left;padding:15px;">-->
                        <!--                            共216个众筹项目-->
                        <!--                        </div>-->
                        <div style="float:right;">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入搜索内容">
                                </div>
                                <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div th:if="${#strings.isEmpty(more_project_other)}">没有加载到任何分类信息</div>
    <div th:if="${not #strings.isEmpty(more_project_other)}">

        <div class="container">

            <div class="row clearfix">
                <div    id="all"  >
                    <div class="col-md-12 column">

                        <div class="row">

                            <div th:each="project : ${more_project_other}" class="col-md-3 t-hover-shadow">
                                <a th:href="'http://localhost:8888/project/get/project/detail/'+${project.projectId}">
                                    <div class="thumbnail" style="border: none">
                                        <img alt="300x200" th:src="${project.headerPicturePath}" src="img/product-1.jpg" />
                                        <div class="caption">
                                            <h3 class="break">
                                                <a th:href="'http://localhost:8888/project/get/project/detail/'+${project.projectId}" href="project.html" th:text="${project.projectName}">活性富氢净水直饮机</a>
                                            </h3>
                                            <p>
                                            <div style="float: left;">
                                                <i class="glyphicon glyphicon-screenshot" title="目标金额"></i>
                                                $<span th:text="${project.money}">20,000</span>
                                            </div>
                                            <div style="float: right;">
                                                <i title="截至日期" class="glyphicon glyphicon-calendar"></i>
                                                <span th:text="${project.deployDate}">2017-20-20</span>
                                            </div>
                                            </p>
                                            <br>
                                            <div class="progress" style="margin-bottom: 4px;">
                                                <div class="progress-bar progress-bar-success"
                                                     role="progressbar" th:aria-valuenow="${project.percentage}" aria-valuenow="40" aria-valuemin="0"
                                                     aria-valuemax="100" th:style="'width: '+${project.percentage}+'%'" style="width: 40%">
                                                    <span th:text="${project.percentage}+'% '">40% </span>
                                                </div>
                                            </div>
                                            <div>
														<span style="float: right;"><i
                                                                class="glyphicon glyphicon-star-empty"></i></span> <span><i
                                                    class="glyphicon glyphicon-user" title="支持人数"></i> <span th:text="${project.supporter}">12345</span></span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="container">
                <div class="row clearfix">
                    <div class="col-md-12 column" style="text-align:center">
                        <ul class="pagination">
                            <li>
                                <a rel="nofollow" href="#">上一页</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#">1</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#">2</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#">3</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#">4</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#">5</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="#">下一页</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="container" style="margin-top:20px;">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div id="footer">
                            <div class="footerNav">
                                <a rel="nofollow" href="http://www.atguigu.com">关于我们</a> | <a rel="nofollow" href="http://www.atguigu.com">服务条款</a> | <a rel="nofollow" href="http://www.atguigu.com">免责声明</a> | <a rel="nofollow" href="http://www.atguigu.com">网站地图</a> | <a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
                            </div>
                            <div class="copyRight">
                                Copyright ?2010-2014atguigu.com 版权所有
                            </div>
                        </div>

                    </div>
                </div>
            </div>





        </div> <!-- /container -->











        <script src="jquery/jquery-2.1.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="script/docs.min.js"></script>
        <script src="script/back-to-top.js"></script>
        <style>
            .activeColor{
                color: #ff6600;
            }
        </style>
        <script>
            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })

            $('#single').click(function (e) {
               $('#single').addClass("activeColor");
            });
          function  singleActive(){
              $('#single').addClass("label-activeColor");
          };
        </script>
    </div>
</div>
</div>
</div>
</div>











</body>
</html>